<template>
    <div class="common-layout" style="background-color:honeydew">
        <el-container>
            <el-header class="header">
                <span class="icon">
                <el-icon :size="35">
                    <shop/>
                </el-icon>
            </span>
                <span class="title">汪汪羊</span>
            </el-header>
            <el-main class="main">
                <el-col :span="100" v-for="collect in collects" :key="collect">
                    <el-card class="order-card" :oid="collect.collid" style="margin-top: 10px">
                        <div class="left">
                            <el-image class="order-picture" :src="`http://127.0.0.1:8081/product/${collect.product.picture}`"></el-image>
                            <div class="right">
                                <div>
                                    <el-text truncated style="font-size: 23px;">{{ collect.product.title }}</el-text>
                                </div>
                                <div>
                                    <el-text truncated style="font-size: 18px;">{{ collect.product.subtitle }}</el-text>
                                </div>
                                <div>
                                    <el-text truncated style="font-size: 15px;">{{ collect.product.description }}</el-text>
                                </div>
                                <div >
                                    <el-text style="color: orangered;font-size: 18px">价格：{{ collect.product.price }}</el-text>
                                </div>
                                <div >
                                    <el-button style="margin-top: 10px; margin-left: 0px" @click="removeById(collect.collid)">移出收藏夹</el-button>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import router from '../../router/index.js'
import {onMounted, ref,reactive,toRaw} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRoute} from "vue-router";
import collectApi from "../../api/collect.js"
import axios from "axios";

onMounted(()=>{
    queryByUid()
})
const route = useRoute()
let uid = route.query.uid
console.log(uid)
const collects = ref([])

const queryByUid = async() =>{
    const res = await collectApi.queryByUid({uid:uid})
    console.log(uid)
    collects.value = res.data
}

const removeById = (collid) => {
    ElMessageBox.confirm(
        '确定移出吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        axios.delete('http://127.0.0.1:8080/collect/removeById', {data: {collid: collid}}).then(res => {
            if (res.data) {
                ElMessage.success("移出成功")
                queryByUid();
            } else {
                ElMessage.error("移出失败")
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}
</script>

<style scoped>
.common-layout {
    width: 100%;
    margin: auto;
    height: 1000px;
}
.common-layout{
    cursor: pointer;
}
.header {
    height: 60px;
    background: rgba(33, 33, 33, .8);
    color: #f9f9f9;
    width: 100%;
}
.main{
    width: 80%;
    margin-left: 135px;
    padding-top: 10px;
}
.el-container {
    -ebkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.el-icon {
    color: orangered;
}
.icon {
    display: inline-block;
    vertical-align: middle; /*垂直方向居中对齐*/
}
.title {
    margin-left: 10px;
    font-size: 25px;
    font-weight: bolder;
    line-height: 60px; /* 行高 行高等于父级容器的高度 将在父级容器中垂直居中 */
}
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}
.el-dropdown-link
{
    float: right;
    padding-top: 22px;
    padding-right: 20px;
    color: white;
}
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.title
{
    padding: 8px 10px;
    font-weight: bold;
}
hr {
    width: 160px;
    height: 1px;
    margin: 8px auto;
    color: #ffffee;
    border: 0;
    border-top: 1px #ddd solid;
}
.left{
    float: left;
    height: 170px;
    margin-left: 20px;
}
.right {
    float: right;
    width: 700px;
    margin-left: 100px;
}
.order-picture{
    height: 150px;
    width: 150px;
}
</style>